<mat-card class="container">
  <mat-card-content class="card-content">
    <div class="inner-container">
      <div class="left-pane">
        <div class="header dialog-header"><h3>{{ 'Manual Selection' | translate }}</h3></div>
        <ix-manual-selection-disks
          [enclosures]="data.enclosures"
        ></ix-manual-selection-disks>
      </div>
      <mat-divider class="divider" [vertical]="true"></mat-divider>
      <div class="right-pane">
        <div class="header vdevs-header">
          <h3>{{ 'VDEVs' | translate }}</h3>
          @if (!(hideAddVdevButton$ | async)) {
            <div class="header-actions">
              <button
                *ixRequiresRoles="requiredRoles"
                mat-button
                class="mat-button"
                ixTest="add"
                (click)="addVdev()"
              >
                {{ 'Add' | translate }}
              </button>
            </div>
          }
        </div>

        <mat-divider class="header-divider"></mat-divider>
        <div class="vdevs-container">
          @if (!currentVdevs.length) {
            <div class="no-vdevs">
              <p>{{ 'Click Add to add first VDEV.' | translate }}</p>
              <p>{{ 'Alternatively, you can start by configuring VDEVs in the wizard first and then opening Manual selection to make adjustments.' | translate }}</p>
            </div>
          } @else {
            @for (vdev of currentVdevs; track trackVdevById($index, vdev)) {
              <ix-manual-selection-vdev
                [vdev]="vdev"
                [layout]="data.layout"
                [editable]="true"
                [enclosures]="data.enclosures"
              ></ix-manual-selection-vdev>
            }
          }
        </div>
        <mat-divider class="divider actions-divider"></mat-divider>
        <div class="actions">
          <button
            *ixRequiresRoles="requiredRoles"
            mat-button
            color="primary"
            ixTest="save-selection"
            [disabled]="isSaveDisabled$ | async"
            (click)="onSaveSelection()"
          >{{ 'Save Selection' | translate }}</button>
          <button
            mat-button
            ixTest="cancel"
            [matDialogClose]="false"
          >{{ 'Cancel' | translate }}</button>
        </div>
      </div>
    </div>
  </mat-card-content>
</mat-card>
